<template>
	<div class="music-list">
<<<<<<< HEAD
		<div class="back" @click="back">
	      	<i class="icon-back"></i>
	    </div>
	    <h1 class="title no-wrap" v-html="title"></h1>
	    <div class="bg-image" :style='bgImage' ref="bgImage">
=======
	    <div class="back" @click="back">
	      	<i class="icon-back"></i>
	    </div>
	    <h1 class="title no-wrap" v-html="title"></h1>
	    <div class="bg-image" :style="bgStyle" ref="bgImage">
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
		    <div class="play-wrapper">
		        <div ref="playBtn" v-show="songs.length>0" class="play">
		          	<i class="icon-play"></i>
		          	<span class="text">随机播放全部</span>
		        </div>
		    </div>
	    </div>
	    <div class="list" ref="list">
		    <div class="song-list-wrapper">
<<<<<<< HEAD
		    	<song-list :songs="songs" @selected='selected'></song-list>
		    </div>
	    </div>
	</div>
=======
		    	<song-list @select="select" :songs="songs"></song-list>
		    </div>
	    </div>
  	</div>
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
</template>

<script>
	import SongList from 'base/songList/songList'
	import BScroll from 'better-scroll'
	import { mapActions } from 'vuex'
<<<<<<< HEAD
	export default {
		props:{
			bgImg:{
				type:String,
				default:()=>{
					return '';
				}
			},
			songs: {
		        type: Array,
		        default: ()=>{
					return [];
				}
		    },
		    title: {
		        type: String,
		        default: ()=>{
					return '';
				}
		    }
		},
		mounted(){
			// this.imageHeight = this.$refs.bgImage.clientHeight
			this.imageHeight = this.$refs.bgImage.clientHeight
			this.$refs.list.style.top = `${this.imageHeight}px`
			this._initScroll()
			// console.log(this)
		},
		computed: {
			bgImage(){
				return `background-image:url(${this.bgImg});background-size:cover`
			}
		},
		methods:{
			back(){
				// console.log(this.router)
				this.$router.go(-1)
			},
			_initScroll(){
				this.scroll = new BScroll(this.$refs.list,{
					scrollY: true,
    				click: true
				})
			},
			selected(item,index){
				// console.log(item,index)
				this.selectPlay({
					list:this.songs,
					index:index
				})
			},
			...mapActions({
				selectPlay:'selectPlay'
			})


	 	},
		components:{
			SongList
		}
	}
=======

	export default {
		props: {
	      bgImage: {
	        type: String,
	        default: ''
	      },
	      songs: {
	        type: Array,
	        default: []
	      },
	      title: {
	        type: String,
	        default: ''
	      }
	    },
	    mounted(){
	    	this.imageHeight = this.$refs.bgImage.clientHeight
	    	this.$refs.list.style.top = `${this.imageHeight}px`
	    	this._initScroll()
	    },
	    methods:{
	    	back(){
	    		this.$router.go(-1)
	    	},
	    	_initScroll(){
	    		this.scroll = new BScroll(this.$refs.list,{
	    			probeType: 1,
            		click: true
	    		});
	    	},
	    	select(item,index){
	    		this.selectPlay({
	    			list:this.songs,
	    			index
	    		})
	    	},
	    	...mapActions({
	    		selectPlay:'selectPlay'
	    	})
	    },
	    computed:{
	    	bgStyle(){
	    		return `background-image:url(${this.bgImage})`
	    	}
	    },
	    watch:{
	        songs(){
	          setTimeout(() => {
	            this.scroll.refresh()
	          }, 20)
	        }
	      },
	    components: {
	      	SongList
	    }
	}

>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
</script>

<style scoped lang="less">
	@import "~assets/less/variable";
 	@import "~assets/less/mixin";

  	.music-list{
	    position: fixed;
	    z-index: 100;
	    top: 0;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    background: @color-background;
	    .back{
	      	position: absolute;
	      	top: 0;
	      	left: 6px;
	      	z-index: 500;
	    	.icon-back{
	    	    display: block;
	    	    padding: 10px;
	    	    font-size: @font-size-large-x;
	    	    color: @color-theme;
	    	}
	    }
	    .title{
	        position: absolute;
	        top: 0;
	        left: 10%;
	        z-index: 40;
	        width: 80%;
	        text-align: center;
	        line-height: 40px;
	        font-size: @font-size-large;
	        color: @color-text;
	    }
	    .bg-image{
	    	position: relative;
	    	width: 100%;
	    	height: 0;
	    	padding-top: 70%;
	    	transform-origin: top;
	    	background-size: cover;
	    	.play-wrapper{
	    		position: absolute;
		        bottom: 20px;
		        z-index: 50;
		        width: 100%;
		        .play{
			        box-sizing: border-box;
			        width: 135px;
			        padding: 7px 0;
			        margin: 0 auto;
			        text-align: center;
			        border: 1px solid @color-theme;
			        color: @color-theme;
			        border-radius: 100px;
			        font-size: 0;
			        .icon-play{
			        	display: inline-block;
			        	vertical-align: middle;
			        	margin-right: 6px;
			        	font-size: @font-size-medium-x;
			        }
		          	.text{
		          		display: inline-block;
		          		vertical-align: middle;
		          		font-size: @font-size-small;
		          	}
		        }
	    	}     
	    }
	    .list{
	      	position: fixed;
	      	top: 0;
	      	bottom: 0;
	      	width: 100%;
	      	background: @color-background;
	      	overflow: hidden;
	      	.song-list-wrapper{
	        	padding: 20px 30px
	      	}
	    }
  	}
</style>